<!-- @author zhengjie -->
<template>
  <div >
    <div class="icon-list">
      <div :class="['icon-item',item===selected?'active':'']" v-for="item in iconList" @click="selectIcon(item)"  >
        <img :src="require('@/assets/icons/device_icon/'+item+'.png')" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import icons from './requireIcons'
export default{
  props:{
    target:String
  },
  data(){
    return{
      iconList: icons,
      selected:''
    }
  },
  created(){
    this.selected = this.target
  },
  methods:{
    selectIcon(value){
      this.selected  = value;
      this.$emit('change',value)
    }
  },
  watch:{
    target(v){
      this.selected = v
    }
  }
}

</script>

<style lang="scss" scoped >
.icon-list{
  display: flex;
  flex-wrap: wrap;
  .icon-item{
    padding: 10px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 5px;
    &.active{
      background-color: #eee;
    }
    img{
      width: 30px;
      height: 30px;
    }
  }
}
</style>